// 材料采购付款申请
<template>
  <div class="box">
    <!-- 查询form表单 -->
    <el-form ref="form" :model="form" label-width="100px" class="clearFix">
      <el-form-item label="标题">
        <el-input v-model="form.name" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="付款日期">
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="form.date1"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="项目名称">
        <el-select v-model="form.region" placeholder="请选择">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关联合同">
        <el-select v-model="form.region" placeholder="请选择">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否紧急">
        <el-select v-model="form.region" placeholder="请选择">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="申请人">
        <el-input v-model="form.name" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="提交时间">
        <el-select v-model="form.region" placeholder="请选择">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审核状态">
        <el-select v-model="form.region" placeholder="请选择">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-row>
      <el-button type="primary" size="small">查询</el-button>
      <el-button size="small">重置</el-button>
    </el-row>
    <!-- 表格 -->
    <el-table :data="nowData" border style="width: 100%">
      <el-table-column align="center" prop="id" label="编号" width="50">
      </el-table-column>
      <el-table-column
        align="center"
        prop="projectName"
        label="标题"
        width="250"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="date"
        label="拟付款日期"
        width="100"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="province"
        label="待附金额(元)"
        width="100"
      >
      </el-table-column>
      <el-table-column align="center" prop="city" label="所属项目" width="120">
      </el-table-column>
      <el-table-column
        align="center"
        prop="address"
        label="关联合同"
        width="120"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="shiyou"
        label="是否紧急"
        width="100"
      >
      </el-table-column>
      <el-table-column align="center" prop="ren" label="申请人" width="60">
      </el-table-column>
      <el-table-column align="center" prop="time" label="提交时间" width="120">
      </el-table-column>
      <el-table-column
        align="center"
        prop="zhuangtai"
        label="审核状态"
        width="100"
      >
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="180">
        <template>
          <el-button type="text" size="small">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="changePage"
      background
      layout="prev, pager, next"
      :current-page="nowPage"
      :page-count="maxPage"
      align="right"
    >
    </el-pagination>
  </div>
</template>

<script>
import tableMainin from "../../../../utils/myMixin";
export default {
  name: "ClassPage",
  mixins: [tableMainin],
  components: {},
  data() {
    return {
      form: {
        name: "",
        region: "",
      },
      monishuju: [
        {
          id: 1,
          date: "2016-05-02",
          projectName: "苏州地铁项目002号合同付款申请",
          province: "2000",
          city: "苏州地铁项目",
          address: "002号合同",
          zip: 200333,
          shiyou: "否",
          ren: "张三",
          time: "2020-11-12  15:00",
          zhuangtai: "草稿",
        },
        {
          id: 2,
          date: "2016-05-02",
          projectName: "苏州地铁项目002号合同付款申请",
          province: "2000",
          city: "苏州地铁项目",
          address: "002号合同",
          zip: 200333,
          shiyou: "否",
          ren: "张三",
          time: "2020-11-12  15:00",
          zhuangtai: "草稿",
        },
      ],
    };
  },
  computed: {},
  methods: {
    shuju() {
      this.tableData = this.monishuju;
    },
  },
  created() {
    this.shuju();
  },
};
</script>
<style scoped lang='less'>
.el-form {
  .el-form-item {
    width: 300px;
    float: left;
    .el-col {
      width: 100%;
    }
  }
}
.el-row {
  text-align: left;
}

//表格
.el-table {
  margin-top: 80px;
  font-size: 12px;
}
</style>